<template>
    <p class="register">注册</p>
    <div class="reg-form-header">
        <div class="reg-form-body">
            <form @submit.prevent="submitForm" class="reg-form">
                <div class="form-group row">
                    <label for="name" class="col-md-4 col-form-label text-md-right">名称</label>

                    <div class="col-md-6">
                        <input v-model="formData.nick_name" type="text" class="form-control" name="nick_name" required
                            autofocus>

                    </div>
                </div>
                <div class="form-group row">
                    <label for="email" class="col-md-4 col-form-label text-md-right">电子邮件地址</label>

                    <div class="col-md-6">
                        <input v-model="formData.email" type="email" class="form-control" name="email" required>

                    </div>
                </div>

                <div class="form-group row">
                    <label for="password" class="col-md-4 col-form-label text-md-right">密码 </label>

                    <div class="col-md-6">
                        <input v-model="formData.password" type="password" class="form-control" name="password" required>

                    </div>
                </div>

                <div class="form-group row">
                    <label for="password-confirm" class="col-md-4 col-form-label text-md-right">确认密码</label>

                    <div class="col-md-6">
                        <input v-model="formData.password_confirmation" type="password" class="form-control"
                            name="password_confirmation" required>
                    </div>
                </div>
                <div class="form-group row mb-0">
                    <div class="col-md-6 offset-md-4">
                        <button type="submit" class="btn btn-primary">
                            注册
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
// import '../../node_modules/bootstrap/dist/css/bootstrap.css';
// import 'bootstrap';
import axios from 'axios'
export default {
    name: "RegComponent",
    data() {
        return {
            formData: {
                nick_name: '',
                email: '',
                password: '',
                password_confirmation: ''
            }
        };
    },
    methods: {
        submitForm() {
            axios.post('/api/register', this.formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    console.log('Response from server:', response.data);
                    // 处理响应数据或提供用户反馈
                })
                .catch(error => {
                    console.error('Error submitting form data:', error);
                    // 处理错误
                });
        }
    }

}
</script>

<style scoped>
.reg-form-body {
    background-color: white;
    width: 590px;
    height: 344.6px;
    padding: 43px 36px;
    border-top: 1px solid rgba(0, 0, 0, 0.125);

}

/* .reg-form {
    display: grid;
    grid-template-columns: 1fr 3fr;
} */

.reg-form-header {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.form-group {
    margin-bottom: 20px;
}
</style>